<template>
  <div class="app-container bg-gray">
    <el-card class="box-1">
      <div slot="header"><span>转单情况</span></div>
      <el-row>
        <el-col :span="12">
          <el-form label-width="140px">
            <el-form-item label="转单人姓名：" prop="title">{{ info['userName'] || '--' }}</el-form-item>
            <el-form-item label="转单时间：">{{ info['createTime'] }}</el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12">
          <el-form label-width="140px">
            <el-form-item label="转单人手机：">{{ info['userMobile'] || '--' }}</el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-form ref="transferForm" :model="form" :rules="rules" label-width="140px">
        <el-form-item label="转单备注：">{{ info['remark'] }}</el-form-item>
        <el-form-item label="转单状态：" prop="title">
          <el-tag v-if="info['status']==='1'" type="danger">待处理</el-tag>
          <el-tag v-else-if="info['status']==='3'" type="info">已驳回</el-tag>
          <el-tag v-else type="success">已转单</el-tag>
        </el-form-item>
        <el-form-item v-if="info['status']==='1'" label="接单人员：">
          <el-select v-model="form.admin_id" class="select" filterable clearable>
            <el-option-group
              v-for="group in adminList"
              :key="group.label"
              :label="group.label">
              <el-option
                v-for="item in group['personnel']"
                :key="item.id"
                :label="item.name"
                :value="item.id"/>
            </el-option-group>
          </el-select>
        </el-form-item>
        <el-form-item v-if="info['status']==='1'" label="驳回原因：">
          <el-input v-model="form['reason']" type="textarea" rows="4" placeholder="审核驳回则需要填写驳回原因, 审核通过则不需要填写..."/>
        </el-form-item>
        <el-form-item v-if="info['status']==='1'">
          <el-button type="danger" @click="submitTransfer(0)">驳回</el-button>
          <el-button type="success" class="bg-green" @click="submitTransfer(1)">审核通过</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-1"style="margin-top: 20px;">
      <div slot="header">
        <span>工单详情</span>
      </div>
      <el-row>
        <el-col :span="12">
          <el-form label-width="160px">
            <el-form-item label="提交时间：">{{ info['createTime'] }}</el-form-item>
            <el-form-item label="提交人姓名：">{{ info['memberName'] }}</el-form-item>
            <el-form-item label="所属分类：">{{ info['catName'] }}</el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12">
          <el-form label-width="160px">
            <el-form-item label="工单状态：">
              <el-tag v-if="info['status']==='1'" type="danger">待签收</el-tag>
              <el-tag v-else-if="info['status']==='2'" type="success">处理中</el-tag>
              <el-tag v-else type="warning">已结单</el-tag>
            </el-form-item>
            <el-form-item label="提交人手机：">{{ info['memberMobile'] }}</el-form-item>
            <el-form-item label="类型/范围：">{{ info['typeName'] }}</el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-divider/>
      <el-form label-width="240px">
        <el-form-item v-for="(item, index) in info.feedback" :key="index">
          <span slot="label">
            <el-tooltip :content="item.name" class="item" effect="dark" placement="top">
              <div class="form-label">{{ item.name }}</div>
            </el-tooltip>
          </span>
          <slot v-if="item['reply']">
            <ws-upload-multiple-img v-if="item.type==='UploadPicture'" :disable="true" :path="item['reply']"/>
            <div v-else-if="item.type==='UploadVoice'">
              <div v-for="(subItem, index) in item['reply']" :key="index">
                <label>{{ subItem['name'] }}</label>
                <el-button class="el-icon-video-play" type="primary" size="small" @click="playVoice(subItem['src'])">播放</el-button>
                <el-link :href="subItem['src']" target="_blank"><el-button type="primary" size="small">下载</el-button></el-link>
              </div>
            </div>
            <div v-else-if="item.type==='UploadFile'">
              <div v-for="(subItem, index) in item['reply']" :key="index" >
                <el-link :href="subItem.url" target="_blank">
                  {{ subItem.filename }}
                </el-link>
              </div>
            </div>
            <label v-else>{{ item['reply'] }}</label>
          </slot>
          <slot v-else>
            <label> {{ '--' }}</label>
          </slot>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card v-if="info['status']!=='1'" class="box-1" style="margin-top: 20px;">
      <div slot="header"><span>处理情况</span></div>
      <el-form v-for="item in info['replyData']" :key="item.id" label-width="140px">
        <el-form-item label="处理人：">{{ item['name'] + ' ( '+ item['createTime'] + ' ) ' }}</el-form-item>
        <el-form-item label="内容：">{{ item['feedback'] }}</el-form-item>
        <el-form-item v-if="item['picture'] && item['picture'].length>0" label="图片：">
          <ws-upload-multiple-img :disable="true" :path="item['picture']"/>
        </el-form-item>
        <el-form-item v-if="item['annex']&& item['annex'].length>0" label="附件：">
          <el-table :data="item['annex']" border highlight-current-row>
            <el-table-column prop="filename" label="文件名" min-width="140" header-align="center" align="center" />
            <el-table-column prop="describe" label="描述" min-width="160" header-align="center" align="center"/>
            <el-table-column prop="updateTime" label="更新时间" width="160" header-align="center" align="center"/>
            <el-table-column prop="cost" label="收费" width="120" header-align="center" align="center"/>
            <el-table-column prop="cost" label="操作" width="120" header-align="center" align="center">
              <template slot-scope="scope">
                <el-link :href="scope.row['url']" target="_blank">下载</el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-divider/>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        ImageUrl: '',
        id: '',
        // 服务人员列表
        adminList: [],
        info: {},
        form: {
          admin_id: '',
          reason: ''
        },
        rules: {
          admin_id: [{ required: true, message: '请选择接单网格员', trigger: 'change' }]
        }
      }
    },
    watch: {},
    created() {
      this.id = this.$route.query.id;
      this.getData();
      this.getUsersList();
    },
    methods: {
      getData() {
        const url = 'newWork/change/getInfo';
        const data = { id: this.id };
        this.$store.dispatch('GetConnect', { url, data }).then(res => {
          this.info = res.data;
        }).catch(e => {
          this.$message.error(e.msg + ',请刷新或联系管理员');
        })
      },
      /**
       *  获取系统用户列表
       *  接口:'user/all-list'
       */
      getUsersList() {
        const url = 'workorder/changeOrderAdminList'
        this.$store.dispatch('GetConnect', { url }).then(res => {
          this.adminList = res.data;
        }).catch(e => {
          this.$message.error(e.msg + ',请刷新或联系管理员')
        })
      },
      submitTransfer(status) {
        this.$refs['transferForm'].validate((valid) => { // 表单验证
          if (valid) {
            const url = status === 1 ? 'newWork/change/agree' : 'newWork/change/refuse';
            const data = {
              id: this.id,
              userId: this.form.admin_id,
              reason: this.form.reason,
              status: status
            };
            this.$store.dispatch('GetConnect', { url, data }).then(res => {
              this.$message.success(res.msg);
              this.$router.back();
            }).catch(e => {
              this.$message.error(e.msg + ',请刷新或联系管理员!');
            })
          } else {
            this.$message.error('提交失败,请检查必填项');
          }
        })
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../../../styles/index.scss';
  .box-1 {
    max-width: 1000px;
    margin: 0 auto;
  }
  .form-label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 180px;
    color: #000;
  }
</style>
